<template>
  <div id="app">
    <!-- 导航栏 -->
    <navbar class="nav"
            :titletext="title"
            :leftBtn="leftBtn"
            :rightBtn="rightBtn"></navbar>
    <!-- 导航栏list的布局 -->
    <ul class="showlist"
        v-show="$store.state.showList.list">
      <li :class="$store.state.showList.node?'selectList':''"
          @click="changeList('node')">备忘录</li>
      <li :class="$store.state.showList.date?'selectList':''"
          @click="changeList('date')">日 程</li>
      <li :class="$store.state.showList.bill?'selectList':''"
          @click="changeList('bill')">账 单</li>
      <li :class="$store.state.showList.rember?'selectList':''"
          @click="changeList('rember')">纪念日</li>
    </ul>

    <!-- 主体内容 -->
    <router-view class="routerMain"></router-view>

    <!-- 下方粉色按钮及列表的布局 -->
    <ul class="editList1"
        v-show="editList1">
      <router-link class="link"
                   to="/node"
                   tag="li"
                   name="node">
        <svg class="icon"
             aria-hidden="true">
          <use href="#icon-node"></use>
        </svg>
        <div>备忘录</div>
      </router-link>
      <router-link class="link"
                   to="/date"
                   tag="li"
                   name="date">
        <svg class="icon"
             aria-hidden="true">
          <use href="#icon-date"></use>
        </svg>
        <div>日 程</div>
      </router-link>
      <router-link class="link"
                   to="/bill"
                   tag="li"
                   name="bill">
        <svg class="icon"
             aria-hidden="true">
          <use href="#icon-bill"></use>
        </svg>
        <div>账 单</div>
      </router-link>
      <router-link class="link"
                   to="/rember"
                   tag="li"
                   name="rember">
        <svg class="icon"
             aria-hidden="true">
          <use href="#icon-rember"></use>
        </svg>
        <div>纪念日</div>
      </router-link>
      <li class="link"
          @click="!$store.state.edit?$store.commit('toEdit',true):saveChange()">
        <svg class="icon"
             aria-hidden="true">
          <use href="#icon-setting"></use>
        </svg>
        <div>{{$store.state.edit?'保 存':'管 理'}}</div>
      </li>
    </ul>
    <!-- 粉色按钮 -->
    <div class="edit"
         @click="editChange">
      <svg class="edit"
           aria-hidden="true"
           v-if="!$store.state.edit">
        <use href="#icon-edit"></use>
      </svg>
      <svg class="edit"
           aria-hidden="true"
           v-else>
        <use href="#icon-cancle"></use>
      </svg>
    </div>
    <msgbox></msgbox>
  </div>
</template>
<script>
import navbar from "@/components/MyNavBar.vue"
import msgbox from "@/components/msgBox.vue"
export default {
  components: {
    navbar,
    msgbox
  },
  data () {
    return {
      title: '事务管理',
      editList1: false,
      leftBtn: 'home',
      rightBtn: 'home'
    }
  },
  watch: {
    '$route.path': function (newVal, oldVal) {
      // console.log(newVal + "---" + oldVal);
      if (newVal === '/') {
        this.rightBtn = 'home';
        this.leftBtn = 'home';
      } else {
        this.rightBtn = 'save';
        this.leftBtn = 'back';
      }
      switch (newVal) {
        case "/": this.title = "事务管理"; break;
        case "/node": this.title = "备忘录";
          this.$store.commit('changeList', 'node');
          break;
        case "/date": this.title = "日 程";
          this.$store.commit('changeList', 'date');
          break;
        case "/bill": this.title = "账 单";
          this.$store.commit('changeList', 'bill');
          break;
        case "/rember": this.title = "纪念日";
          this.$store.commit('changeList', 'rember');
          break;
      }
    }
  },
  methods: {
    // 改变右上角列表选择
    changeList (res) {
      this.$store.commit("changeList", res)
    },
    // 保存更改信息
    saveChange () {
      this.$store.commit('toEdit', false)
      // 进行保存
      this.$store.commit('saveEdit')
    },
    // 进行编辑，显示删除按钮
    editChange () {
      this.editList1 = !this.editList1
      if (this.$store.state.edit) {
        this.$router.push('/refresh');
        this.$store.commit('toEdit', false)
      }
    }
  }
}
</script>
<style lang="scss" scope>
#app {
  width: 100wh;
  height: 100vh;
  background: #ffa;
}
.showlist {
  position: fixed;
  right: 15px;
  top: 50px;
  background: #ff0;
  .selectList {
    background: #fca;
  }
  li {
    padding: 4px;
    margin: 4px;
    border: #aaa dashed 1px;
    cursor: pointer;
  }
}
.editList1 {
  position: fixed;
  right: 60px;
  bottom: 30px;
  background: #f0f2;
  text-align: center;
  border-radius: 10px;
  border: #567 solid 1px;
  .link {
    padding: 4px;
    margin: 4px;
    border: #aaa dashed 1px;
    font-size: 12px;
    float: left;
    cursor: pointer;
    &:hover {
      background: #ff0;
    }
  }
  .icon {
    width: 24px;
    height: 24px;
  }
}
.edit {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 40px;
}
.routerMain {
  width: calc(100% - 40px);
  height: calc(100% - 140px);
  margin: 20px;
  // padding: 20px;
}
</style>
<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  font-family: "微软雅黑";
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>
